<!--rent  container-->
<template>
  <div>
    <div class="search-box">
      <el-form :inline="true" label-position="top" :model="searchForm" size="mini" ref="ruleForm"  class="demo-ruleForm main-search-box">
        <el-form-item prop="region" :label="$t('m.Region')" >
          <el-select style="width: 200px" v-model="searchForm.RegionID" clearable placeholder="" @change="getTownships">
            <el-option v-for="rg in regions" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="region" :label="$t('m.Township')" >
          <el-select style="width: 200px" multiple collapse-tags v-model="searchForm.townshipId" placeholder="">
            <el-option v-for="ts in townships" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="region" :label="$t('m.PropertyType')" >
          <el-select style="width: 200px" v-model="searchForm.propertyTypeId" clearable placeholder="" @change="getSubType">
            <el-option v-for="rg in propertyType" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="region" :label="$t('m.SubType')">
          <el-select style="width: 200px" multiple collapse-tags v-model="searchForm.propertySubTypeId" placeholder="">
            <el-option v-for="ts in propertySubType" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
          </el-select>
        </el-form-item>

        <el-row>
          <el-col>
            <el-form-item prop="region" :label="$t('m.PriceMinLks')" style="width: 200px;margin-right: 0">
              <el-input v-model="searchForm.priceMin" placeholder=""></el-input>
            </el-form-item>
            <el-form-item style="margin-top: 25px;margin-right: 0px;"><span>-</span></el-form-item>
            <el-form-item prop="region" :label="$t('m.PriceMaxLks')" style="width: 200px">
              <el-input v-model="searchForm.priceMax" placeholder=""></el-input>
            </el-form-item>

            <el-form-item style="margin-top: 24px;margin-left: 1px;">
              <el-button style="color: #606266!important;" @click="toggleShowMore">{{$t('m.More')}}<i v-if="!showMore" class="el-icon-arrow-down"></i><i
                v-if="showMore"
                class="el-icon-arrow-up"></i>
              </el-button>
              <el-button type="primary" @click="getList(1)">{{$t('m.Search')}}</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div class="line-form" v-if="showMore"></div>
      <!--more-->
      <el-form v-if="showMore" label-position="top" :inline="true" ref="form" :model="moreForm" label-width="120px" size="mini" class="more-box main-search-box">

        <el-form-item v-if="showOther" :label="$t('m.Totalbedrooms')">
          <el-select style="width: 200px" multiple collapse-tags v-model="moreForm.totalBedrooms" @change="onToggleAny($event, 'totalBedrooms')"
                     placeholder="">
            <el-option v-for="ts in totalBedroomsJson" :key="ts.value" :label="ts.text"
                       :value="ts.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="showOther" :label="$t('m.MasterBedroom')">
          <el-select style="width: 200px" v-model="moreForm.masterBedroom" placeholder="" @change="onToggleAnySingle($event, 'masterBedroom')">
            <el-option v-for="ts in masterBedroomJson" :key="ts.value" :label="ts.text"
                       :value="ts.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="showOther" :label="$t('m.Bathroom')">
          <el-select style="width: 200px" v-model="moreForm.Bathroom" placeholder="" @change="onToggleAnySingle($event, 'Bathroom')">
            <el-option v-for="ts in BathroomJson" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
          </el-select>
        </el-form-item>

        <el-row v-if="showOther">
          <el-form-item :label="$t('m.FloorsizeMinFeet')" style="width: 200px;margin-right: 0">
            <el-input v-model="moreForm.floorSizeList[0].minSize" placeholder=""></el-input>
          </el-form-item>
          <el-form-item style="margin-top: 25px;margin-right: 0px;"><span>-</span></el-form-item>
          <el-form-item :label="$t('m.FloorsizeMaxFeet')"  style="width: 200px">
            <el-input v-model="moreForm.floorSizeList[0].maxSize" placeholder=""></el-input>
          </el-form-item>
        </el-row>

        <el-row v-if="landSizeShow">
          <el-form-item :label="$t('m.LandsizeMinFeet')" style="width: 200px;margin-right: 0">
            <el-input v-model="moreForm.landSizeList[0].minSize" placeholder=""></el-input>
          </el-form-item>
          <el-form-item style="margin-top: 25px;margin-right: 0px"><span>-</span></el-form-item>
          <el-form-item :label="$t('m.LandsizeMaxFeet')" style="width: 200px">
            <el-input v-model="moreForm.landSizeList[0].maxSize" placeholder=""></el-input>
          </el-form-item>
        </el-row>

        <el-row v-if="showOther">
          <el-col :span="24" :gutter="20">
            <el-form-item :label="$t('m.FloorLevel')">
              <el-select multiple collapse-tags v-model="moreForm.floorLevelId" @change="onToggleAny($event, 'floorLevelId')" placeholder=""
                         style="min-width: 412px">
                <el-option v-for="ts in floorLevel" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item :label="$t('m.Furnishing')" >
              <el-select style="width: 200px" multiple collapse-tags v-model="moreForm.FurnishingId"
                         @change="onToggleAny($event, 'FurnishingId')" placeholder="">
                <el-option v-for="ts in Furnishing" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="showOther">
          <el-col :span="24" :gutter="20">
            <el-form-item :label="$t('m.BuildingAge')">
              <el-select style="width: 200px" multiple collapse-tags v-model="moreForm.BuildingAgeID"
                         @change="onToggleAny($event, 'BuildingAgeID')" placeholder="">
                <el-option v-for="ts in BuildingAge" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('m.Facing')" >
              <el-select style="width: 200px" multiple collapse-tags placeholder="" v-model="moreForm.FacingID" @change="onToggleAny($event, 'FacingID')">
                <el-option v-for="ts in Facing" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item :label="$t('m.Source')" >
              <el-select style="width: 200px" collapse-tags v-model="moreForm.SourceId"
                         @change="onToggleAnySingle($event, 'SourceId')" placeholder="">
                <el-option v-for="ts in Source" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="sort-box">
      <el-form  size="mini" ref="sortForm" label-position="top"  class="demo-ruleForm">
        <el-form-item prop="region" label="" style="margin-bottom: 0">
          <el-select style="width: 200px" v-model="sortForm" :placeholder="$t('m.Sort')" @change="getList">
            <el-option v-for="rg in buySortJson" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="buyList">
      <el-table
        :data="tableData"
        :show-header="false"
        @row-click="goToDetail"
        style="width: 100%">
        <el-table-column
          label=""
          width="200">
          <template slot-scope="scope">
            <img :src="scope.row.photoUrl" class="rent-img" alt="" :onerror="defaultImg"/>
          </template>
        </el-table-column>
        <el-table-column
          label=""
          width="350">
          <template slot-scope="scope">
            <h3 class="list-info-title" v-if="scope.row.burmeseTitle || scope.row.englishTitle">{{ $i18n.locale == 'MM'
              ? translateUTZaw(scope.row.burmeseTitle) : translateUTZaw(scope.row.englishTitle)}}</h3>
            <p>{{getPropertytype(scope.row.propertyTypeId)}}/{{getSubPropertytype(scope.row.propertySubTypeId)}}</p>
            <p>{{ scope.row.street?translateUTZaw(scope.row.street)+',' :''
              }}{{getTownshipId(scope.row.townshipId)}},{{getregionId(scope.row.regionId)}}</p>
            <p v-if="scope.row.propertyTypeId !=4"><span>{{regexNum(scope.row.masterBedrooms)}} Master</span> <span>{{ regexNum(scope.row.bedrooms)}} {{$t('m.Beds')}}</span> <span>{{ regexNum(scope.row.bathrooms)}} {{$t('m.Baths')}}</span>
            </p>
            <p v-if="scope.row.floorWidth">{{regexNum(scope.row.floorWidth)+' x '+regexNum(scope.row.floorLength)+' = '+regexNum(scope.row.floorSize)+' sqft'}}</p>
            <p v-if="!scope.row.floorWidth&&scope.row.floorSize">{{regexNum(scope.row.floorSize)+' sqft'}}</p>
            <p v-if="(scope.row.landWidth)&&(scope.row.propertyTypeId == 3 ||scope.row.propertyTypeId == 4||scope.row.propertyTypeId == 8)">{{regexNum(scope.row.landWidth)+' x '+regexNum(scope.row.landLength)+' = '+regexNum(scope.row.landSize)+' sqft'}}</p>
            <p v-if="(!scope.row.landWidth&&scope.row.landSize) &&(scope.row.propertyTypeId == 3 ||scope.row.propertyTypeId == 4||scope.row.propertyTypeId == 8)">{{regexNum(scope.row.landSize)+' sqft'}}</p>
          </template>
        </el-table-column>
        <el-table-column
          label=""
          width="">
          <template slot-scope="scope">
            <h3 class="rent-price" v-if="scope.row.mmkPrice&&!scope.row.usdPrice">{{ regexNum(scope.row.mmkPrice) }} Lks</h3>
            <h3 class="rent-price" v-if="scope.row.mmkPrice&&scope.row.usdPrice">{{regexNum(scope.row.usdPrice)}} USD ({{regexNum(scope.row.mmkPrice)+' Lks'}})</h3>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-list-box">
        <!--<el-pagination-->
        <!--background-->
        <!--layout="prev, pager, next"-->
        <!--:total="1000"-->
        <!--:page-size="20"-->
        <!--@current-change="changePage">-->
        <!--</el-pagination>-->
        <el-pagination
          background
          @current-change="handleChangePage"
          :current-page="pageData.pageNum"
          :page-count="pageInfo.totalPages"
          layout="prev, pager, next">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  // 英文json
  import propertyType from '@/json/propertyType'
  import propertySubType from '@/json/propertySubType'
  import regions from '@/json/region'
  import townships from '@/json/township'
  import buySort from '@/json/rentSort'

  // 缅甸文json
  import mm_propertyType from '@/mmJson/propertyType'
  import mm_propertySubType from '@/mmJson/propertySubType'
  import mm_regions from '@/mmJson/region'
  import mm_townships from '@/mmJson/township'
  import mm_buySort from '@/mmJson/rentSort'


  import {searchBuyList} from '../../api/zxy_api'
  import qs from 'qs'

  export default {
    name: 'rentList',
    data() {
      return {
        // 搜索子段
        landSizeShow: false,
        townships: [],
        propertySubType: [],
        searchForm: {
          RegionID: 2,
          townshipId: [],
          propertyTypeId: '',
          propertySubTypeId: [],
          priceMin: '',
          priceMax: '',
        },
        moreForm: {
          totalBedrooms: [],
          masterBedroom: '',
          Bathroom: '',
          floorSizeList: [
            {minSize: '', maxSize: ''}
          ],
          landSizeList: [
            {minSize: '', maxSize: ''}
          ],
          floorLevelId: [],
          FurnishingId: [],
          BuildingAgeID: [],
          FacingID: [],
          SourceId: ''
        },
        pageData: {
          pageNum: 1,
          pageSize: 20,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        showMore: false,
        showOther: true,
        // 列表数据
        defaultImg: 'this.src="' + require('../../../static/default.png') + '"',
        tableData: [],
        sortForm: '',
      }
    },
    computed: {
      buySortJson(){
        if (this.$store.state.localLang == 'MM') {
          return mm_buySort
        } else {
          return buySort
        }
      },
      propertyType() {
        if (this.$store.state.localLang == 'MM') {
          return mm_propertyType
        } else {
          return propertyType
        }
      },
      regions() {
        if (this.$store.state.localLang == 'MM') {
          return mm_regions
        } else {
          return regions
        }
      },
      floorLevel() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "ေျမညီထပ္", "value": 100},
            {"text": "ေျမညီထပ္ ထပ္ခိုးအပါ", "value": 103},
            {"text": "ထပ္ခိုး", "value": 101},
            {"text": "1-2", "value": 1},
            {"text": "3-4", "value": 3},
            {"text": "5+", "value": 5},
            {"text": "ဒါဘာ (အမိုးေအာက္တိုက္ခန္း)", "value": 102},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "Ground floor", "value": 100},
            {"text": "Ground floor with Mezzanine", "value": 103},
            {"text": "Mezzanine", "value": 101},
            {"text": "1-2", "value": 1},
            {"text": "3-4", "value": 3},
            {"text": "5+", "value": 5},
            {"text": "Penthouse", "value": 102},
          ]
        }
      },
      Furnishing() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "ပရိေဘာဂ တပ္ဆင္ထားျခင္းမရွိပါ။", "value": 0},
            {"text": "အနည္းငယ္", "value": 1},
            {"text": "အျပည့္အစံု", "value": 2},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "Unfurnished", "value": 0},
            {"text": "Partially", "value": 1},
            {"text": "Fully", "value": 2},
          ]
        }
      },
      BuildingAge() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "<5", "value": 0},
            {"text": "5-10", "value": 1},
            {"text": "10-20", "value": 2},
            {"text": ">20", "value": 3},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "<5", "value": 0},
            {"text": "5-10", "value": 1},
            {"text": "10-20", "value": 2},
            {"text": ">20", "value": 3},
          ]
        }
      },
      Facing() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "အေရွ႔အရပ္", "value": 0},
            {"text": "အေရွ႕ေတာင္အရပ္", "value": 1},
            {"text": "ေတာင္အရပ္", "value": 2},
            {"text": "အေနာက္ ေတာင္အရပ္", "value": 3},
            {"text": "အေနာက္အရပ္", "value": 4},
            {"text": "အေနာက္ေျမာက္အရပ္", "value": 5},
            {"text": "ေျမာက္အရပ္", "value": 6},
            {"text": "အေရွ႕ ေျမာက္အရပ္", "value": 7},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "East", "value": 0},
            {"text": "South East", "value": 1},
            {"text": "South", "value": 2},
            {"text": "South West", "value": 3},
            {"text": "West", "value": 4},
            {"text": "North West", "value": 5},
            {"text": "North", "value": 6},
            {"text": "North East", "value": 7},
          ]
        }
      },
      Source() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "အက်ိဳးေဆာင္မ်ား", "value": 0},
            {"text": "ပိုင္ရွင္မ်ား", "value": 1},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "Agent", "value": 0},
            {"text": "Owner", "value": 1},
          ]
        }
      },
      totalBedroomsJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "1", "value": 1},
            {"text": "2", "value": 2},
            {"text": "3", "value": 3},
            {"text": "4", "value": 4},
            {"text": "5+", "value": 5},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "1", "value": 1},
            {"text": "2", "value": 2},
            {"text": "3", "value": 3},
            {"text": "4", "value": 4},
            {"text": "5+", "value": 5},
          ]
        }
      },
      masterBedroomJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        }
      },
      BathroomJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        }
      },
    },
    methods: {
      regexNum (v,len,split) {regexNum
        split = split || ',', len = Math.abs((+len) % 20 || 2)
        v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
        return v.replace(/\d+/, function (v) {
            var lit = v.length % 3 == 0
            var index = lit ? v.length - 3 : -1
            return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
              return k + ((l == index && lit) ? '' : split)
            }).split('').reverse().join('')
          }
        )
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleChangePage(val) {
        this.pageData.pageNum = val
        this.getList()
      },
      getTownships(regionId) {
        let town = []
        this.townships = []
        this.searchForm.townshipId = []

        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        } else {
          for (var t of townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        }
        this.townships = town
      },
      getSubType(type) {
        // 首先处理部分dom 显示隐藏

        // 初始化
        // var arrShow = [
        //   {"value": 1, "text": "Apartment", "showland": false},
        //   {"value": 2, "text": "Condo", "showland": false},
        //   {"value": 3, "text": "House", "showland": true},
        //   {"value": 4, "text": "Land", "showland": true, "showOther": true},
        //   {"value": 8, "text": "Commercial", "showland": true}
        // ]

        if (this.searchForm.propertyTypeId == 1 || this.searchForm.propertyTypeId == 2) {
          this.landSizeShow = false
        } else {
          this.landSizeShow = true
        }

        if (this.searchForm.propertyTypeId == 4) {
          this.showOther = false
        } else {
          this.showOther = true
        }

        // 将more中数据初始化
        this.moreForm = {
          totalBedrooms: [],
          masterBedroom: '',
          Bathroom: '',
          floorSizeList: [
            {minSize: '', maxSize: ''}
          ],
          landSizeList: [
            {minSize: '', maxSize: ''}
          ],
          floorLevelId: [],
          FurnishingId: [],
          BuildingAgeID: [],
          FacingID: [],
          SourceId: ''
        };

        let subType = []
        this.propertySubType = []
        this.searchForm.propertySubTypeId = []

        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        } else {
          for (var t of propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        }
        this.propertySubType = subType
      },
      toggleShowMore() {
        this.showMore = !this.showMore
      },
      getList(pageNum) {

        if(pageNum == 1){
          this.pageData.pageNum = 1;
        }

        let searchForm = {};

        // 搜索子段处理
        searchForm.transactionTypeId = 2
        if(this.searchForm.RegionID){
          searchForm.regionId = this.searchForm.RegionID
        }
        if(this.searchForm.propertyTypeId){
          searchForm.propertyTypeList = this.searchForm.propertyTypeId
        }
        if (this.searchForm.townshipId.length > 0) {
          searchForm.townshipIdList = this.searchForm.townshipId.join(',')
        }
        if (this.searchForm.propertySubTypeId.length > 0) {
          searchForm.propertySubTypeList = this.searchForm.propertySubTypeId.join(',')
        }

        // minPrice
        if(this.searchForm.priceMin){
          searchForm.minPrice = this.searchForm.priceMin
        }
        // maxPrice
        if(this.searchForm.priceMax){
          searchForm.maxPrice = this.searchForm.priceMax
        }

        // more搜索子段处理

        // Total bedrooms
        if (this.moreForm.totalBedrooms.length > 0 && (!(this.moreForm.totalBedrooms[0] == 'Any'))) {
          let arr = [];
          for (let i = 0; i < this.moreForm.totalBedrooms.length; i++) {
            if (this.moreForm.totalBedrooms[i] != '5') {
              arr.push(this.moreForm.totalBedrooms[i])
            }
          }
          searchForm.totalBedroomList = arr.join(',')
          for (let j = 0; j < this.moreForm.totalBedrooms.length; j++) {
            if (this.moreForm.totalBedrooms[j] == '5') {
              searchForm.minTotalBedroom = '5'
            }
          }
        }

        // Master Bedroom
        if (this.moreForm.masterBedroom && (this.moreForm.masterBedroom != 'Any')) {
          if (this.moreForm.masterBedroom == '0') {
            searchForm.masterBedroomList = this.moreForm.masterBedroom;
          } else {
            searchForm.minMasterBedroom = this.moreForm.masterBedroom;
          }
        }

        // Bathroom
        if (this.moreForm.Bathroom && (this.moreForm.Bathroom != 'Any')) {
          if (this.moreForm.Bathroom == '0') {
            searchForm.bathroomList = this.moreForm.Bathroom;
          } else {
            searchForm.minBathroom = this.moreForm.Bathroom;
          }
        }

        // Floor size
        if (this.moreForm.floorSizeList[0].minSize || this.moreForm.floorSizeList[0].maxSize) {
          searchForm['floorSizeList[0].minSize'] = this.moreForm.floorSizeList[0].minSize;
          searchForm['floorSizeList[0].maxSize'] = this.moreForm.floorSizeList[0].maxSize;
        }

        // Land size
        if (this.moreForm.landSizeList[0].minSize || this.moreForm.landSizeList[0].maxSize) {
          searchForm['landSizeList[0].minSize'] = this.moreForm.landSizeList[0].minSize;
          searchForm['landSizeList[0].maxSize'] = this.moreForm.landSizeList[0].maxSize;
        }

        // floor level
        if (this.moreForm.floorLevelId.length > 0 && (!(this.moreForm.floorLevelId[0] == 'Any'))) {
          let floorLevelList = []
          let floorLevelRangeList = []
          for(let i=0;i<this.moreForm.floorLevelId.length;i++){
            if(this.moreForm.floorLevelId[i] > 5){
              floorLevelList.push(this.moreForm.floorLevelId[i])
            }else if(this.moreForm.floorLevelId[i] <= 5){
              floorLevelRangeList.push(this.moreForm.floorLevelId[i])
            }
          }

          for(let i=0;i<floorLevelRangeList.length;i++){
            if (floorLevelRangeList[i] == 1) {
              searchForm[`floorLevelRangeList[` + i + `].minLevel`] = '1'
              searchForm[`floorLevelRangeList[` + i + `].maxLevel`] = '2'
            } else if (floorLevelRangeList[i] == 3) {
              searchForm[`floorLevelRangeList[` + i + `].minLevel`] = '3'
              searchForm[`floorLevelRangeList[` + i + `].maxLevel`] = '4'
            } else if (floorLevelRangeList[i] == 5) {
              searchForm[`floorLevelRangeList[` + i + `].minLevel`] = '5'
              searchForm[`floorLevelRangeList[` + i + `].maxLevel`] = ''
            }
          }

          // 数组传递
          if(floorLevelList.length>0){
            searchForm.floorLevelList = floorLevelList.join(',')
          }
        }

        // furnishing
        if (this.moreForm.FurnishingId.length > 0 && (!(this.moreForm.FurnishingId[0] == 'Any'))) {
          searchForm.furnishingList = this.moreForm.FurnishingId.join(',')
        }

        // Building Age
        if (this.moreForm.BuildingAgeID.length > 0 && (!(this.moreForm.BuildingAgeID[0] == 'Any'))) {
          for (let i = 0; i < this.moreForm.BuildingAgeID.length; i++) {
            if (this.moreForm.BuildingAgeID[i] == 0) {
              searchForm[`ageList[` + i + `].minAge`] = ''
              searchForm[`ageList[` + i + `].maxAge`] = '5'
            } else if (this.moreForm.BuildingAgeID[i] == 1) {
              searchForm[`ageList[` + i + `].minAge`] = '5'
              searchForm[`ageList[` + i + `].maxAge`] = '10'
            } else if (this.moreForm.BuildingAgeID[i] == 2) {
              searchForm[`ageList[` + i + `].minAge`] = '10'
              searchForm[`ageList[` + i + `].maxAge`] = '20'
            } else if (this.moreForm.BuildingAgeID[i] == 3) {
              searchForm[`ageList[` + i + `].minAge`] = '20'
              searchForm[`ageList[` + i + `].maxAge`] = ''
            }
          }
        }

        // Facing
        if (this.moreForm.FacingID.length > 0 && (!(this.moreForm.FacingID[0] == 'Any'))) {
          searchForm.facingList = this.moreForm.FacingID.join(',')
        }

        // Source
        if (this.moreForm.SourceId && (this.moreForm.SourceId != 'Any')) {
          searchForm.activeType = this.moreForm.SourceId
        }

        // sort
        if(this.sortForm){
          searchForm.sort = this.sortForm
        }


        searchBuyList(Object.assign(searchForm, this.pageData)).then((res) => {
          this.tableData = res.data.data.object.list || []
          // 分页信息配置
          this.pageInfo.totalPages = res.data.data.object.pages
          this.pageInfo.totalCount = res.data.data.object.total
          window.scrollTo(0,0)
        }).catch((e) => {
          console.log(e)
        })
      },
      getPropertytype(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_propertyType) {
            if (id === t.value) {
              return t.text
            }
          }
        } else {
          for (var t of propertyType) {
            if (id === t.value) {
              return t.text
            }
          }
        }
      },
      getSubPropertytype(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_propertySubType) {
            if (id === t.value) {
              return t.text
            }
          }
        } else {
          for (var t of propertySubType) {
            if (id === t.value) {
              return t.text
            }
          }
        }
      },
      getTownshipId(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_townships) {
            if (id === t.value) {
              return t.text
            }
          }
        } else {
          for (var t of townships) {
            if (id === t.value) {
              return t.text
            }
          }
        }
      },
      getregionId(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_regions) {
            if (id === t.value) {
              return t.text
            }
          }
        } else {
          for (var t of regions) {
            if (id === t.value) {
              return t.text
            }
          }
        }
      },
      onTotalBedroomsChange(val) {
        for (var i = 0; i < this.moreForm.totalBedrooms.length; i++) {
          if (this.moreForm.totalBedrooms[i] == 'Any') {
            if (this.moreForm.totalBedrooms[0] == 'Any' && val.length > 1) {
              this.moreForm.totalBedrooms.shift()
            } else {
              this.moreForm.totalBedrooms = ['Any']
            }
          }
        }
      },
      onToggleAny(val, name) {
        let arr = this.moreForm[name] || [];
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] == 'Any') {
            if (arr[0] == 'Any' && val.length > 1) {
              this.moreForm[name].shift()
            } else {
              this.moreForm[name] = []
            }
          }
        }
      },
      onToggleAnySingle(val, name){
        if(val == 'Any'){
          this.moreForm[name] = ''
        }
      },
      goToDetail(row, event, column) {
        const {href} = this.$router.resolve({
          name: 'foo',
          path: '/rentDetails',
          query: {
            id: row.transactionId
          }
        })
        window.open(href, '_blank');
      },
      regexNum (v,len,split) {
        split = split || ',', len = Math.abs((+len) % 20 || 2)
        v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
        var price =  v.replace(/\d+/, function (v) {
            var lit = v.length % 3 == 0
            var index = lit ? v.length - 3 : -1
            return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
              return k + ((l == index && lit) ? '' : split)
            }).split('').reverse().join('')
          }
        )

        if(price.match(".00")){
          return price.replace('.00',"")
        }else if(price.substr(price.length-1, 1) == 0){
          return price.substring(0, price.length-1)
        }
        else {
          return price
        }
      },
      translateUTZaw(str){
        if (!str) return '';
        return this.$translateLang(str, 'unicodeTozawgyi')
      },
    },
    mounted() {
      this.searchForm.RegionID = Number(this.$route.query.regionId) || 2;
      if (this.$route.query.townshipId && this.$route.query.townshipId.length > 0) {
        if (this.$route.query.townshipId.length > 0) {
          this.getTownships(this.searchForm.RegionID)
          if (this.$store.state.localLang == 'MM') {
            for (var t of mm_townships) {
              for (var s of this.$route.query.townshipId) {
                if (t.value == s) {
                  this.searchForm.townshipId.push(t.value)
                }
              }
            }
          } else {
            for (var t of townships) {
              for (var s of this.$route.query.townshipId) {
                if (t.value == s) {
                  this.searchForm.townshipId.push(t.value)
                }
              }
            }
          }
        }
      }else{
        this.getTownships(this.searchForm.RegionID)
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_townships) {
            if (t.value == this.searchForm.RegionID) {
              this.searchForm.townshipId.push(t.value)
            }
          }
        } else {
          for (var t of townships) {
            if (t.value == this.searchForm.RegionID) {
              this.searchForm.townshipId.push(t.value)
            }
          }
        }
      }

      this.searchForm.propertyTypeId = Number(this.$route.query.propertyTypeId) || '';

      // this.searchForm.propertySubTypeId = this.$route.query.propertySubTypeId || []
      if (this.$route.query.propertySubTypeId) {
        if (this.$route.query.propertySubTypeId.length > 0) {
          this.getSubType(this.searchForm.propertyTypeId)
          if (this.$store.state.localLang == 'MM') {
            for (var t of mm_propertySubType) {
              for (var s of this.$route.query.propertySubTypeId) {
                if (t.value == s) {
                  this.searchForm.propertySubTypeId.push(t.value)
                }
              }
            }
          } else {
            for (var t of propertySubType) {
              for (var s of this.$route.query.propertySubTypeId) {
                if (t.value == s) {
                  this.searchForm.propertySubTypeId.push(t.value)
                }
              }
            }
          }
        }
      }

      this.searchForm.priceMin = this.$route.query.minPrice || ''
      this.searchForm.priceMax = this.$route.query.MaxPrice || ''
      this.getList()


    }
  }
</script>
<style>

  .search-box .el-button--primary{
    background-color: #f60!important;
    border-color: #f60!important;
  }

  .search-box .el-form-item {
    margin-bottom: 10px !important;
  }

  .search-box {
    position: relative;
    padding-top: 20px;
    border-bottom: 1px solid #eee;
  }

  .serch-wrap {
    /*height: 100px;*/
    width: 100%;
    margin: 0;
  }

  .more-box {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .buyList {
    width: 1218px;
    margin: 0 auto;
  }

  .buyList .el-table__row {
    cursor: pointer;
  }

  .buyList .el-table__row img {
    display: block;
    width: 180px;
    height: 135px;
  }

  .buyList .el-table__row p {
    /*margin: 22px 0;*/
  }

  .list-info-title {
    margin: 0;
  }

  .rent-price {
    color: rgb(255, 0, 0);
    height: 130px;
    position: relative;
    top: 8px;
    left: 0;
  }

  .page-list-box {
    text-align: center;
    margin: 30px 0;
  }

  .sort-box {
    padding: 20px 0;
    width: 1200px;
    margin: 0 auto;
  }

  .line-form {
    border-top: 1px solid #eee;
  }

  .main-search-box {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 10px;
  }
</style>
